import 'package:flutter/material.dart';
import 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart';

class TimUIStickerFull extends StatelessWidget {

  final List<CustomStickerPackage> customStickerPackageList;
  final void Function(String name,int index)? ontap;

  const TimUIStickerFull({super.key, required this.customStickerPackageList, this.ontap});

  @override
  Widget build(BuildContext context) => Column(
    mainAxisAlignment: MainAxisAlignment.start,
    children: [
      Padding(
        padding: EdgeInsets.only(top: 12,bottom: 30),
        child: SizedBox(
          height: 20,
          child: Center(
            child: Container(
              width: 40, height: 6,
              color: Colors.black26,
            ),
          ),
        ),
      ),
      Text("贴纸",style: TextStyle(fontSize: 20,fontWeight: FontWeight.bold),textAlign: TextAlign.start,),
      SizedBox(height: 8,),
      Text("由 FunShot 创建",style: TextStyle(fontSize: 14,fontWeight: FontWeight.normal,color: Colors.black26),textAlign: TextAlign.start,),
      Expanded(
        child: ListView.builder(itemBuilder: (ct,index) {
          final ele = customStickerPackageList[index];
          return Column(
            children: [
              Row(children: [
                Text(ele.name,style: TextStyle(color: Colors.black,fontSize: 16,fontWeight: FontWeight.bold),),
                Icon(Icons.play_circle_outline,size: 20,),
                Text("FunShot",style: TextStyle(color: Colors.grey),)
              ],),
              Expanded(child: SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: ele.stickerList.sublist(0,7).map(
                      (item) {
                    LayerLink layerLink = LayerLink();
                    return GestureDetector(
                        behavior: HitTestBehavior.translucent,
                        onTap: () {
                          if (ontap !=null) ontap!(ele.name,index);
                        },
                        child: Padding(
                            padding: const EdgeInsets.all(8),
                            child: CompositedTransformTarget(
                                link: layerLink,
                                child: CustomEmojiItem(
                                    isBigImage: true,
                                    baseUrl: ele.baseUrl,
                                    sticker: item))));
                  },
                ).toList(),
              )),
              Divider(indent: 20,)
            ],
          );
        }),
      )
    ],
  );
}